<template>
    <div class="app-container">
      <el-form
        :model="formData"
        ref="formData"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
      >
      <el-form-item label="手机号码" prop="dictLabel">
        <el-input
          v-model="formData.userTel"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="handleQuery"
          maxlength="11"
          @input="handleInput"
        />
      </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['customerService:blacklistList:export']"
            >导出</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="el-icon-upload"
            size="mini"
            @click="openImport"
            v-hasPermi="['customerService:blacklistList:import']"
            >导入</el-button
          >
        </el-col>
  
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
  
      <!-- 表格   -->
      <el-table v-loading="loading" :data="tableData">
        <el-table-column label="序号" align="center" type="index" width="50">
        </el-table-column>
        <el-table-column
        label="手机号码"
        align="center"
        :formatter="
          ({ userTel }) => {
            return desensitizePhone(userTel);
          }
        "
        prop="userTel"
      />
        <el-table-column label="黑名单类型" align="center" prop="blackType" />
        <el-table-column label="关键词" align="center" prop="keywordContent" />
        <el-table-column label="命中语句" align="center" prop="blackContent" />
        <el-table-column
          label="会话时间"
          align="center"
          prop="createTime"
        ></el-table-column>
      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pagination.pageNum"
        :limit.sync="pagination.pageSize"
        @pagination="getList"
      />
  
      <importCommon
        v-if="importShow"
        :importShow="importShow"
        :uploadUrl="'/system/sysBlackLog/importData'"
        :downloadUrl="'system/sysBlackLog/importTemplate'"
        @onImportCancel="onImportCancel"
      ></importCommon>
    </div>
  </template>
  
  <script>
  import { getList } from "@/api/customerService/blacklist-list";
  import importCommon from "../components/import-common.vue";
  
  export default {
    name: "sessionList",
    components: { importCommon },
    data() {
      return {
        loading: false,
        tableData: [], //表格数据
        showSearch: true, //显示搜索条件
        // 查询参数
        formData: {
            userTel: undefined, //黑名单类型
        },
        pagination: {
          pageNum: 1,
          pageSize: 10,
        },
        // 黑名单类型列表
        blackList: [],
        dateRange: [], //日期范围
        total: 0,
        messageDialogShow: false, //消息列表弹窗是否打开
        importShow: false, //导入
      };
    },
    async created() {
      await this.getList();
    },
    methods: {
  
      // 列表查询
      async getList() {
        let params = {
          ...this.formData,
          ...this.pagination,
        };
        this.loading = true;
        const { total, rows } = await getList(
          this.addDateRange(params, this.dateRange)
        );
        this.total = total;
        this.tableData = rows;
        this.loading = false;
      },
  
      /** 搜索按钮操作 */
      handleQuery() {
        this.pagination.pageNum = 1;
        this.getList();
      },
  
      // 手机号脱敏
      desensitizePhone(phone) {
        if (!phone) {
          return "";
        }
        const reg = /(\d{3})\d{4}(\d{4})/;
        return phone.replace(reg, (match, p1, p2) => `${p1}****${p2}`);
      },
  
      /** 重置按钮操作 */
      resetQuery() {
        this.formData = {
          userTel: undefined,
        };
        this.dateRange = [];
        this.handleQuery();
      },
  
      handleInput(value) {
        this.formData.userTel = value.replace(/\D/g, "");
      },
  
      /** 导出按钮操作 */
      handleExport() {
        const url = `system/sysBlackLog/exportBlackLog`;
        let data = {
          ...this.formData,
        };
        if (this.dateRange?.length) {
          data.params =
            typeof data.params === "object" &&
            data.params !== null &&
            !Array.isArray(data.params)
              ? data.params
              : {};
          data.params["beginTime"] = this.dateRange[0];
          data.params["endTime"] = this.dateRange[1];
        }
        this.download(
          url,
          {
            ...data,
          },
          `sysBlackLog_${new Date().getTime()}.xlsx`
        );
      },
  
      //   导入
      openImport() {
        this.importShow = true;
      },
  
      // 导入关闭弹窗
      onImportCancel(){
          this.importShow = false; 
          this.getList()
      }
    },
  };
  </script>
  
  <style lang="scss" scoped></style>
  